<template>
    <div class="login-container">
        <el-button-group class="login-identity">
            <el-button
                    v-for="item in identityList"
                    :key="item.name"
                    @click="changeIdentity(item.name)"
                    :type="item.name === form.identity ? 'primary' : 'default'">{{item.title}}</el-button>
        </el-button-group>
        <el-input class="login-name" v-model="form.name" :placeholder="namePlaceholder"></el-input>
        <el-input class="login-password" type="password" v-model="form.password" placeholder="密码"></el-input>
        <el-button class="login-confirm" type="primary" @click="login">登录</el-button>
    </div>
</template>

<script>
    import Api from '@utils/api';
    import { mapGetters, mapMutations } from 'vuex'

    export default {
        data() {
            return {
                identityList: [
                    {
                        title: "学生",
                        name: "学生" // 传给后端的值
                    }, {
                        title: "老师",
                        name: "老师"
                    }, {
                        title: "管理员",
                        name: "管理员"
                    }
                ],
                form: {
                    identity: '学生',
                    name: '',
                    password: ''
                }
            }
        },
        computed: {
            ...mapGetters([
                'getUserIdentity'
            ]),
            namePlaceholder () {
                return this.form.identity === '学生' ? '学号' : '工号'
            }
        },
        methods: {
            ...mapMutations([
                'setUserId',
                'setUserIdentity'
            ]),
            changeIdentity (name) {
                this.form.identity = name;
            },
            login () {
                let params = {
                    user_id: this.form.name,
                    password: this.form.password,
                    role: this.form.identity
                };

                Api({
                    method: 'post',
                    url: '/login',
                    data: params,
                    headers:{
                        'Content-Type':'application/json'
                    },
                    transformRequest: [function(data) {
                        data = JSON.stringify(data);
                        return data;
                    }],
                }).then(() => {
                    this.setUserId(this.form.name);
                    this.setUserIdentity(this.form.identity);

                    this.$notify({
                        type: 'success',
                        title: '登录成功！'
                    });

                    this.jumpTo();
                })
            },
            jumpTo () {
                if (this.getUserIdentity === "老师") {
                    window.open('/teacher.html', '_self');
                }
                else if (this.getUserIdentity === "学生") {
                    window.open('/student.html', '_self');
                }
                else if (this.getUserIdentity === "管理员") {
                    window.open('/admin.html', '_self');
                }
            }
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    .login {
        &-container {
            /*border: 1px solid #ebeef5;*/
            /*background-color: #fff;*/
            color: #303133;
            padding: 36px;
        }
        &-identity, &-name, &-password {
            margin-bottom: 20px;
            width: 100%;
        }
        &-confirm {
            width: 100%;
        }
        &-identity .el-button {
            width: 33.33%;
        }
    }

</style>